import React, { useState } from 'react'
import {random as r} from 'lodash';
export default function Bg() {
  //1. 声明一个状态
  let [color, setColor] = useState('rgb(20,60,80)');
  let [left, setLeft] = useState(0)
  let [top, setTop] = useState(0)
  //3. 声明
  let change = (e) => {
    //更新状态
    setColor(`rgb(${r(100, 200)},${r(100, 200)},${r(100, 200)})`);
    //阻止冒泡
    e.stopPropagation();
  }
  //为 window 绑定单击事件
  window.onclick = (e) => {
    //获取鼠标位置
    let x = e.clientX;
    let y = e.clientY;
    //修改 div 的位置
    setLeft(x - 150);
    setTop(y - 100);
  }
  return (
    // 2. 使用状态
    <div onClick={change} style={{
        width: 300,
        height: 200, 
        border: 'solid 1px #ddd', 
        background: color,
        position: 'absolute',
        left: left,
        top: top
        }}>

    </div>
  )
}
